<template>
	<view>
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="服务评论" :autoBack="true">
			</u-navbar>
		</view>
		<view class="con-body wrap">
			<view class="contact_con">
				<view class="con_list u-rela" :icon="detail.icon" style="margin-bottom:20rpx;">
					<image :src="detail.icon" class="con_img"></image>
					<view class="center_con">
						<view>
							<text class="center_title" style="">{{detail.name}}</text>
							
							<text class="center_type" v-if="detail.type==0">{{detail.type_value}}</text>
							<text class="center_type" v-else style="background-color: #fc0;">{{detail.type_value}}</text>
						</view>
						<view class="tel_con">{{detail.tel}}</view>
					</view>
					<view class="u-abso" style="display: inline-block;top:55rpx;right:10rpx;font-size: 24rpx;" @click="toselect()">
						<text style="margin-right:10rpx;" class="va_m">匿名评价</text>
						<image v-if="isselect" class="va_m" style="width:26rpx;" mode="widthFix" src="https://resourse.cnlhjt.com/upload/20221221/4c34012d516c2f77556ffc216993e2b4.png"></image>
						<image v-else class="va_m" style="width:26rpx;" mode="widthFix" src="https://resourse.cnlhjt.com/upload/20221221/347c7cdebd94a11a9d610d96da725a7c.png" ></image>
						
					</view>
					
				</view>
				<view class="conment_con">
					<text>请您为我本月的服务进行评价</text>
					<view class="dis_inl_blo" style="margin-left:15rpx;">
						<u-rate :current="5" v-model="comment" size="20" activeColor="#fc0"></u-rate>
					</view>
				</view>
				<view class="com_text">
					<textarea name="" id="" maxlength="200" rows="10" v-model="commentCon" placeholder="您的评价将帮助我们更好的成长~" @input="textareainput"></textarea>
				</view>
				<view style="text-align: right;font-size: 20rpx;color:#bbb;margin-top:10rpx;">{{len}}/200</view>
				<view class="btn_con" @click="tocomment">确认提交</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		keeperComment
	} from "@/service/propertyService.js";
	export default {
		data() {
			return {
				detail:{},
				comment:5,
				isselect:false,
				selectvalue:0,
				commentCon:'',
				len:0
			}
		},
		onLoad(options) {
			this.detail=JSON.parse(options.item)
		},
		methods: {
			toselect(){
				this.isselect=!this.isselect;
				if(this.isselect){
					this.selectvalue=1
				}else{
					this.selectvalue=0
				}
			},
			textareainput(e){
				var content=e.detail.cursor;
				this.len=content;
			},
			tocomment(){
				var obj={};
				obj.sid=this.detail.id;
				obj.star=this.comment;
				obj.content=this.commentCon;
				obj.is_anonymous=this.selectvalue;
				keeperComment(obj).then(res=>{
					if(res.code==200){
						this.$refs.uToast.show({
							type: 'success',
							message: "提交成功",
							complete() {
								let pages = getCurrentPages();
								let beforePage = pages[pages.length - 2];
								beforePage.$vm.reFresh = Math.random()
								uni.navigateBack()
							}
						})
					}else{
						this.$refs.uToast.show({
											
							type: 'error',
							message: res.msg,
							complete() {
								
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color:#f8f8f8;
		height:100%;
	}
	.contact_con{
		// padding-top:20rpx;
		width:94%;
		margin:0 3%;
		.con_list{
			margin-top:20rpx;
			padding:40rpx 20rpx;
			width:94%;
			border-bottom:1rpx solid #999;
			.con_img{
				width:120rpx;
				height:120rpx;
				margin-right:30rpx;
				border-radius: 60rpx;
				vertical-align: middle;
			}
			.center_con{
				display: inline-block;
				vertical-align: middle;
				.center_title{
					font-size: 33rpx; 
					font-weight: 800; 
					color: #333;
				}
				.center_type{
					font-size: 22rpx; 
					background-color: #00828a;
					color: aliceblue; 
					padding: 5rpx 10rpx; 
					margin-left: 10rpx; 
					border-top-left-radius: 15rpx;
					border-bottom-right-radius: 15rpx;
				}
				.tel_con{
					font-size: 24rpx;
					color:#666;
					margin-top:10rpx;
				}
				
			}
		}
		
	}
	.conment_con{
		padding:5rpx 0;
		font-size: 28rpx;
		margin-top:20rpx;
		color:#666;
	}
	.com_text{
		border-radius: 15rpx;
		padding:20rpx;
		margin-top:20rpx;
		background-color: #fff;
		textarea{
			width:100%;
		}
	}
	.btn_con{
		height:80rpx;
		line-height: 80rpx;
		text-align: center;
		color:#fff;
		margin-top:100rpx;
		border-radius: 40rpx;
		background-color: #00828a;
	}
</style>
